<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 主题展公司管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                公司名称:
                <el-input placeholder="公司名称" class="handle-input mr10" @change="handleSearch" v-model="companyName"></el-input>
                请选择会展:
                <el-select placeholder="请选择会展" v-model="exhibitionId">
                    <el-option label="全部" value=""></el-option>
                     <el-option v-for="(item, index) in exhibitBasicList" :key="index" :label="item.value" :value="item.id"> </el-option>
                </el-select>
                &nbsp; 是否推荐:
                <el-select placeholder="请选择" v-model="searchIsHot">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="是" :value="0"></el-option>
                    <el-option label="否" :value="1"></el-option>
                </el-select>
                &nbsp;
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <div class="div-add" style="display: block">
                    <el-button style="margin: 10px 0px" type="primary" @click="addCompany">+ 新增主题展公司</el-button>
                </div>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="companyName" label="公司名称" align="center"></el-table-column>
                <el-table-column label="LOGO图" align="center">
                    <template slot-scope="scope">
                        <img :src="$myUrl.IMGURL + scope.row.companyLogo" alt="" style="width: 50px; height: 50px" />
                    </template>
                </el-table-column>
                <el-table-column prop="exhibitName" label="所属会展" align="center"></el-table-column>
                <el-table-column prop="isHot" label="是否热推" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isHot == 0">是</span>
                        <span v-else> 否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderLevel" label="权重值" align="center"></el-table-column>

                <el-table-column prop="productCount" label="产品数" align="center"></el-table-column>
                <el-table-column prop="createTime" label="发布时间" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="500">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toCheck(scope.$index, scope.row)">修改推荐</el-button>
                        <el-button type="info" @click="toDetail(scope.$index, scope.row)">产品管理</el-button>
                        <!-- <el-button type="primary" @click="toCheck(scope.$index, scope.row)">查看</el-button> -->
                        <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- // 查看弹出框 -->
        <el-dialog title="查看" :visible.sync="lookVisible" width="50%">
            <el-button @click="lookVisible = false">取消</el-button>
        </el-dialog>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form>
                <el-form-item label="公司名称"> {{ editLook.companyName }} </el-form-item>
                <el-form-item label="公司LOGO图">
                    <el-image style="width: 100px; height: 100px" :src="$myUrl.IMGURL + editLook.companyLogo"> </el-image>
                </el-form-item>
                <el-form-item label="所属会展">{{ editLook.exhibitName }}</el-form-item>
                <el-form-item label="是否推荐">
                    <el-select placeholder="请选择" v-model="setIsHot">
                        <el-option label="是" :value="0"></el-option>
                        <el-option label="否" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权重值">
                    <el-input class="W300" v-model="setOrderLevel"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit(form)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
//import { fetchData } from '../../api/index';
//import {getCompanyList,deleteCompany} from '../../api/company'
export default {
    name: 'basetable',
    data() {
        return {
            tableData: [],
            pageTotal: 0,
            pageNum: 1,
            pageSize: 10,
            exhibitBasicList: [],
            // 弹出框
            checkVisible: false,
            lookVisible: false,
            editVisible: false,
            // 编辑展示
            editLook: {
                companyName: '',
                companyLogo: '',
                exhibitName: ''
            },
            // 编辑提交数据
            setIsHot: '',
            setOrderLevel: '',
            exhibitCompanyId: '',
            // 搜索条件
            companyName:'',
            exhibitionId:'',
            searchIsHot:'',
        };
    },
    created() {
        this.getData();
        this.getExhibitBasicList()
    },
    methods: {
        // 主题展下拉框数据
        getExhibitBasicList() {
            axios.get(this.$myUrl.BASEURL + 'exhibit/getExhibitBasicList').then((res) => {
                console.log('主题展下拉框数据', res);
                this.exhibitBasicList = res.data.data;
            });
        },
        // 新增会展公司
        addCompany() {},
        toDetail(index, row) {
            console.log(row);
            this.$router.push('/product-list');
        },

        //
        getData() {
            axios
                .get(this.$myUrl.BASEURL + 'exhibitCompany/getExhibitCompanyList?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize)
                .then((res) => {
                    console.log('getData', res);
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.totalNumber;
                });
        },
        // 触发搜索按钮
        handleSearch() {
            axios
                .get(
                    this.$myUrl.BASEURL +
                        'exhibitCompany/getExhibitCompanyList?pageNum=' +
                        this.pageNum +
                        '&pageSize=' +
                        this.pageSize +
                        '&isHot=' + this.searchIsHot +
                        '&exhibitId=' + this.exhibitionId +
                        '&companyName=' + this.companyName 
                )
                .then((res) => {
                    console.log('getData', res);
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.totalNumber;
                });
        },
        // 修改推荐
        toCheck(index, row) {
            console.log(row);
            this.$confirm('确定修改吗？', '提示', {
                type: 'warning'
            }).then(() => {
                if (row.isHot == 0) {
                    axios
                        .put(
                            this.$myUrl.BASEURL +
                                'exhibitCompany/updateExhibitCompany?isHot=1&exhibitCompanyId=' +
                                row.id +
                                '&orderLevel=' +
                                row.orderLevel
                        )
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('修改成功');
                                this.getData();
                            }
                        });
                } else {
                    axios
                        .put(
                            this.$myUrl.BASEURL +
                                'exhibitCompany/updateExhibitCompany?isHot=0&exhibitCompanyId=' +
                                row.id +
                                '&orderLevel=' +
                                row.orderLevel
                        )
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('修改成功');
                                this.getData();
                            }
                        });
                }
            });
        },
        // 删除操作
        handleDelete(index, id) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                axios.delete(this.$myUrl.BASEURL + 'exhibitCompany/deleteByExhibitCompanyId?exhibitCompanyId=' + id).then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message.success('删除成功');
                        this.getData();
                    }
                });
            });
        },
        // 编辑按钮
        handleEdit(index, row) {
            this.exhibitCompanyId = row.id;
            console.log(row);
            this.editLook.companyName = row.companyName;
            this.editLook.companyLogo = row.companyLogo;
            this.editLook.exhibitName = row.exhibitName;
            this.setIsHot = row.isHot;
            this.setOrderLevel = row.orderLevel;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            axios
                .put(
                    this.$myUrl.BASEURL +
                        'exhibitCompany/updateExhibitCompany?exhibitCompanyId=' +
                        this.exhibitCompanyId +
                        '&isHot=' +
                        this.setIsHot +
                        '&orderLevel=' +
                        this.setOrderLevel
                )
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message.success('编辑成功');
                        this.getData();
                        this.editVisible = false;
                    }
                });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    /* width: 100px;
    height: 80px; */
    /* border-radius: 50%; */
}
.check_image {
    width: 100px;
    height: 70px;
}
.avatar-uploader video {
    width: 100%;
}
.avatar-uploader img {
    width: 100%;
}
.W300 {
    width: 300px;
}
</style>
